<template>
  <!-- 账户标签页面 -->
  <section class="page account-tag-query">
    <data-form :model="model" :page="pageService" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="客户号" prop="personalId">
          <el-input v-model.trim="model.personalId" ></el-input>
        </el-form-item>
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model.trim="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input
            v-model.trim="model.personalName"
            :maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="客群标签AT" prop="tagName">
          <el-input v-model.trim="model.tagName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="标记时间" prop="reviewerDate">
          <el-date-picker v-model="model.reviewerDate" type="daterange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效时间" prop="expirationDate">
          <el-date-picker v-model="model.expirationDate" type="daterange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="maxAT" prop="max">
          <el-input v-model.trim="model.max" ></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column
          prop="caseNumber"
          label="账户号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="personalId"
          label="客户号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="personalName"
          label="客户姓名"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column label="客群标签" show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.userTags"
              :key="item.id"
              class="table-item-border"
            >
              {{ `${item.code}(${item.description})` }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="标记时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.userTags"
              :key="item.id"
              class="table-item-border"
            >
              {{
                item.reviewerDate && $filter.dateTimeFormat(item.reviewerDate)
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="失效时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.userTags"
              :key="item.id"
              class="table-item-border"
              style="height:29px;"
            >
              {{
                item.expirationDate && $filter.dateFormat(item.expirationDate)
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="max"
          label="maxAT"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { CustomerGroupManageService } from "~/services/domain-service/customer-group-manage.service";

@Auth(2320)
@Layout("workspace")
@Component({
  components: {}
})
export default class AccountTagQuery extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CustomerGroupManageService)
  private customerGroupManageService: CustomerGroupManageService;

  private dataSet: any[] = [];

  private model: any = {
    tagName: "",
    caseNumber: "",
    personalId: "",
    personalName: "",
    expirationDate: [],
    reviewerDate: [],
    max:''
  };

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    if (
      this.model.caseNumber &&
      this.$validator.regex.isChineseComma.test(this.model.caseNumber)
    )
      return this.$message.error("请用英文逗号！");
    this.customerGroupManageService
      .findAllCaseTags(this.paramsHandler(), this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private paramsHandler() {
    const params = { ...this.model };
    params.minExpirationDate = this.$filter.dateRanageFormat(
      this.model.expirationDate
    ).start;
    params.maxExpirationDate = this.$filter.dateRanageFormat(
      this.model.expirationDate
    ).end;
    params.minReviewerDate = this.$filter.dateRanageFormat(
      this.model.reviewerDate
    ).start;
    params.maxReviewerDate = this.$filter.dateRanageFormat(
      this.model.reviewerDate
    ).end;
    delete params.reviewerDate;
    delete params.expirationDate;
    return params;
  }
}
</script>

<style lang="less" scoped></style>
